import { FC } from "react"
import { connect } from "react-redux"
import { useTranslation } from 'react-i18next'
import { Dropdown } from 'antd-mobile'
import game from '@/assets/images/index/game-play.png'
import "./index.scss"

interface IGameFragment {}

const GameFragment: FC<IGameFragment> = () => {

    const { t } = useTranslation()

	return (
		<div id="game">
            <div className="token-top flex-between">
                <div className="game-title">
                    G
                    <span className="game-title-a">a</span>
                    me
                </div>
                <Dropdown>
                    <Dropdown.Item key='sorter' title={`${t('indexGame.outpost')}`}>
                        <div style={{ padding: '12px 6.66%' }}>
                            {t('indexGame.outpost')}
                        </div>
                        <div style={{ padding: '12px 6.66%' }}>
                            {t('indexGame.space')}
                        </div>
                        <div style={{ padding: '12px 6.66%' }}>
                            {t('indexGame.mobile')}
                        </div>
                        <div style={{ padding: '12px 6.66%' }}>
                            {t('indexGame.alien')}
                        </div>
                        <div style={{ padding: '12px 6.66%' }}>
                            {t('indexGame.forest')}
                        </div>
                    </Dropdown.Item>
                </Dropdown>
            </div>
            <div className="game-tab-content">
                <div className="game-tab-img">
                    <img src={game} alt="" />
                </div>
                <div className="game-introduction">{t('indexGame.introduction')}</div>
            </div>
		</div>
	)
}

const mapStoreToProps = () => {
	return {}
}

const mapDispatchToProps = () => {
	return {}
}

export default connect(mapStoreToProps, mapDispatchToProps)(GameFragment)